<template>
	<el-alert title="问题切换会自动保存，发生错误请手动保存！！！" show-icon center type="info" effect="dark"> </el-alert>
	<div class="slpreview">
		<pre-left class="panel left" :id="id" />
		<pre-right class="panel right" :id="id" />
	</div>
</template>

<script setup lang="ts">
import preLeft from './components/preLeft.vue';
import preRight from './components/preright.vue';
const props = defineProps({
	id: {
		type: String,
		default: ''
	}
});
</script>

<style lang="scss" scoped>
.slpreview {
	display: flex;
	gap: 20px;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	width: 100%;
	height: calc(100vh - 100px);
	background-color: #f5f7fa;
	padding: 20px;
	box-sizing: border-box;

	.panel {
		width: 50%;
		height: 100%;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		background-color: #fff;
		overflow: hidden;
		transition: all 0.3s ease;
		position: relative;

		&:hover {
			box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
		}
	}
}

@media screen and (max-width: 1200px) {
	.slpreview {
		flex-direction: column;

		.panel {
			width: 100%;
			height: calc(50% - 10px);
		}
	}
}
</style>
